<template>
  <div class="navbar">
    <ul class="container">
      <template v-if="userInfo.token">
        <li>
          <router-link to="">
            <i class="iconfont icon-user"></i>
            {{ userInfo.nickname || userInfo.account }}
          </router-link>
        </li>
        <li>
          <a href="javascript:void(0)"
             @click="logout">
            退出登录
          </a>
        </li>
      </template>
      <template v-else>
        <li>
          <a href="javascript:void(0)"
             @click="toLogin">
            请先登录
          </a>
        </li>
        <li>
          <router-link to="">免费注册</router-link>
        </li>
      </template>
      <li>
        <router-link to="">我的订单</router-link>
      </li>
      <li>
        <router-link to="">会员中心</router-link>
      </li>
      <li>
        <router-link to="">帮助中心</router-link>
      </li>
      <li>
        <router-link to="">关于我们</router-link>
      </li>
      <li>
        <router-link to=""><i class="iconfont icon-phone"></i>手机版</router-link>
      </li>
    </ul>
  </div>
</template>

<script lang="ts"
        setup>
import message from '@/components/library/Message/index'
import {useCartStore} from '@/stores/cart'
import {useUserStore} from '@/stores/user'
import {storeToRefs} from 'pinia'
import {useRoute, useRouter} from 'vue-router'

let userStore = useUserStore()
let cartStore = useCartStore()
let {userInfo} = storeToRefs(userStore)

let route = useRoute()
let router = useRouter()

function logout() {
  userInfo.value = {}
  cartStore.list = []
  message.success('退出成功')
}

function toLogin() {
  router.push({
    path: '/login',
    query: {redirect: route.fullPath}
  })
}
</script>

<style lang="less"
       scoped>
.navbar {
  height: 53px;
  background-color: #333;
  display: flex;
  align-items: center;

  ul {
    display: flex;
    justify-content: flex-end;

    li {
      padding: 0 15px;
      display: flex;
      align-items: center;
      height: 15px;

      a {
        color: #cdcdcd;
      }

      &:hover {
        color: @xtxColor;
      }

      ~ li {
        border-left: 2px solid #666;
      }
    }
  }
}
</style>